<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城报栈 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 确保容器尺寸固定 */
        .wechat-container {
            width: 393px;
            height: 852px;
            position: relative;
            overflow: hidden;
        }
        
        /* 胶囊按钮样式 */
        .capsule-button {
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        /* 分割线样式 */
        .capsule-divider {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* 内容区域样式 */
        .content-area {
            height: 808px;
            overflow-y: scroll;
            background: #FFF8E1;
            scroll-behavior: smooth;
        }
        
        /* 隐藏滚动条 */
        .content-area::-webkit-scrollbar {
            display: none;
        }
        
        /* 渐变背景 */
        .gradient-header {
            background: linear-gradient(135deg, #FF7043 0%, #FF8A65 100%);
        }
        
        /* 卡片阴影 */
        .card-shadow {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="wechat-container mx-auto bg-white relative">
        <!-- 状态栏 -->
        <div class="h-11 bg-white flex items-center justify-between px-4 text-black relative z-10">
            <!-- 左侧时间 -->
            <div class="text-sm font-medium">1:41</div>
            
            <!-- 右侧状态图标 -->
            <div class="flex items-center gap-1">
                <!-- 5G网络图标 -->
                <div class="text-xs font-medium">5G</div>
                <!-- 信号强度图标 -->
                <div class="flex items-end gap-0.5 ml-1">
                    <div class="w-1 h-1 bg-black rounded-full"></div>
                    <div class="w-1 h-1.5 bg-black rounded-full"></div>
                    <div class="w-1 h-2 bg-black rounded-full"></div>
                    <div class="w-1 h-2.5 bg-black rounded-full"></div>
                </div>
                <!-- 电池图标 -->
                <div class="ml-1 flex items-center">
                    <div class="w-6 h-3 border border-black rounded-sm relative">
                        <div class="absolute inset-0.5 bg-black rounded-sm" style="width: 74%;"></div>
                    </div>
                    <div class="w-0.5 h-1.5 bg-black rounded-r-sm ml-0.5"></div>
                    <span class="text-xs ml-1">37</span>
                </div>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="relative content-area">
            <!-- 微信胶囊按钮 -->
            <div class="absolute right-3 top-1 flex capsule-button rounded-full h-7 w-18 z-20">
                <!-- 三个点按钮 -->
                <div class="w-9 h-7 flex items-center justify-center">
                    <div class="flex gap-0.5">
                        <div class="w-1 h-1 bg-black rounded-full"></div>
                        <div class="w-1 h-1 bg-black rounded-full"></div>
                        <div class="w-1 h-1 bg-black rounded-full"></div>
                    </div>
                </div>
                <!-- 分割线 -->
                <div class="w-px h-4 capsule-divider self-center"></div>
                <!-- 关闭按钮 -->
                <div class="w-9 h-7 flex items-center justify-center">
                    <div class="w-3.5 h-3.5 border border-black rounded-full"></div>
                </div>
            </div>
            
            <!-- 头部区域 -->
            <div class="gradient-header px-4 pt-3 pb-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center mr-3">
                            <span class="text-orange-500 font-bold text-lg">城</span>
                        </div>
                        <div>
                            <h1 class="text-white text-xl font-bold">城报栈</h1>
                            <p class="text-white text-xs opacity-90">本地便民信息聚合平台</p>
                        </div>
                    </div>
                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5-5-5h5v-12"></path>
                        </svg>
                    </div>
                </div>
                
                <!-- 搜索框 -->
                <div class="bg-white bg-opacity-20 rounded-full px-4 py-3 flex items-center">
                    <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    <span class="text-white opacity-80 text-sm">搜索便民信息、商家活动...</span>
                </div>
            </div>
            
            <!-- 四大板块 -->
            <div class="px-4 -mt-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow">
                    <div class="grid grid-cols-2 gap-4">
                        <!-- 社区板块 -->
                        <div class="flex flex-col items-center p-4 bg-orange-50 rounded-xl">
                            <div class="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center mb-2">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                </svg>
                            </div>
                            <span class="text-sm font-medium text-gray-700">社区</span>
                            <span class="text-xs text-gray-500 mt-1">便民信息</span>
                        </div>
                        
                        <!-- 市场板块 -->
                        <div class="flex flex-col items-center p-4 bg-blue-50 rounded-xl">
                            <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mb-2">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                                </svg>
                            </div>
                            <span class="text-sm font-medium text-gray-700">市场</span>
                            <span class="text-xs text-gray-500 mt-1">团购活动</span>
                        </div>
                        
                        <!-- 朋友板块 -->
                        <div class="flex flex-col items-center p-4 bg-green-50 rounded-xl">
                            <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mb-2">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </div>
                            <span class="text-sm font-medium text-gray-700">朋友</span>
                            <span class="text-xs text-gray-500 mt-1">邻里互助</span>
                        </div>
                        
                        <!-- 明星板块 -->
                        <div class="flex flex-col items-center p-4 bg-yellow-50 rounded-xl">
                            <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mb-2">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                                </svg>
                            </div>
                            <span class="text-sm font-medium text-gray-700">明星</span>
                            <span class="text-xs text-gray-500 mt-1">优质推荐</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 热门推荐 -->
            <div class="px-4 mb-6">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-lg font-bold text-gray-800">🔥 热门推荐</h2>
                    <span class="text-sm text-blue-500">查看更多</span>
                </div>
                
                <div class="space-y-3">
                    <!-- 推荐项目1 -->
                    <div class="bg-white rounded-xl p-4 card-shadow">
                        <div class="flex items-start">
                            <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=80&h=80&fit=crop&crop=center" 
                                 alt="家政服务" class="w-16 h-16 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="font-medium text-gray-800 mb-1">专业家政清洁服务</h3>
                                <p class="text-sm text-gray-600 mb-2">经验丰富的阿姨团队，价格实惠，服务周到</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-orange-500 font-bold">¥80/次起</span>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                                        </svg>
                                        距离500m
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 推荐项目2 -->
                    <div class="bg-white rounded-xl p-4 card-shadow">
                        <div class="flex items-start">
                            <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=80&h=80&fit=crop&crop=center" 
                                 alt="水果团购" class="w-16 h-16 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="font-medium text-gray-800 mb-1">新鲜水果社区团购</h3>
                                <p class="text-sm text-gray-600 mb-2">当季新鲜水果，产地直供，明日自提</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-orange-500 font-bold">¥29.9/箱</span>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        已有23人参团
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 推荐项目3 -->
                    <div class="bg-white rounded-xl p-4 card-shadow">
                        <div class="flex items-start">
                            <img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=80&h=80&fit=crop&crop=center" 
                                 alt="顺风车" class="w-16 h-16 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="font-medium text-gray-800 mb-1">跨城顺风车拼车</h3>
                                <p class="text-sm text-gray-600 mb-2">明天上午9点出发，还有2个空位</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-orange-500 font-bold">¥45/人</span>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                        </svg>
                                        明天9:00
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航占位 -->
            <div class="h-20"></div>
        </div>
    </div>
</body>
</html>